﻿
@{
    ViewBag.Title = "集采批次维护";
}


<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs6 layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header" id="chart02_title"></div>
                <div class="layui-card-body" style="height:280px;">
                    <div id="chart02" style="height:280px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header" id="chart03_title"></div>
                <div class="layui-card-body" style="height:280px;">
                    <div id="chart03" style="height:280px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-sm12">
            <div class="layui-card">
                <div class="layui-card-header" id="chart01_title"></div>
                <div class="layui-card-body" style="height:300px;">
                    <div id="chart01" style="height:300px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="~/Scripts/echarts/echarts.min.js"></script>
<script src="~/Scripts/echarts/theme/macarons.js"></script>

<script type="text/javascript">
    $(function () {

    });
</script>

<script type="text/javascript">
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'admin'], function () {
        var table = layui.table
            , form = layui.form
            , $ = layui.$
            , admin = layui.admin;
    });
    var dom1 = document.getElementById("chart01");
    var myChart1 = echarts.init(dom1, 'dark');
    var option1;

    myChart1.showLoading();

    var dom2 = document.getElementById("chart02");
    var myChart2 = echarts.init(dom2, 'dark');
    var option2;

    myChart2.showLoading();

    var dom3 = document.getElementById("chart03");
    var myChart3 = echarts.init(dom3, 'dark');
    var option3;

    myChart3.showLoading();

    $.post('/Report/GetEcharts1', function (data) {
        myChart1.hideLoading();
        var edata = data.data;
        $('#chart01_title').html('全院药品批次完成情况');

        const cData = [];
        const iData = [];
        const rawData = [];
        const xaxisData = [];
        const totalData = [];
        $.each(edata, function (index, item) {
            // 'index'是当前项的索引，'item'是当前项的内容
            cData.push(item.cNum);
            iData.push(item.iNum);
            xaxisData.push(item.GroupName);
        });
        rawData.push(cData);
        rawData.push(iData);
        for (let i = 0; i < rawData[0].length; ++i) {
            let sum = 0;
            for (let j = 0; j < rawData.length; ++j) {
                sum += rawData[j][i];
            }
            totalData.push(sum);
        }
        const grid = {
            left: 100,
            right: 100,
            top: 50,
            bottom: 50
        };
        const series = [
            '已完成',
            '未完成'
        ].map((name, sid) => {
            return {
                name,
                type: 'bar',
                stack: 'total',
                barWidth: '60%',
                label: {
                    show: true,
                    formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
                },
                data: rawData[sid].map((d, did) =>
                    totalData[did] <= 0 ? 0 : d / totalData[did]
                )
            };
        });
        option1 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        show: true
                    },
                    crossStyle: {
                        color: '#999'
                    }
                },
                formatter: function (params) {
                    var tip = '';
                    if (params != null && params.length > 0) {
                        tip += params[0].name + '<br />';
                        for (var i = 0; i < params.length; i++) {
                            tip += params[i].marker;
                            tip += '<span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">' + params[i].seriesName + '</span>';
                            tip += '<span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">' + Math.round(params[i].value * 1000) / 10 +'%' + '</span>';
                            tip += '<div style="clear:both"></div>';
                        }
                    }
                    return tip;
                }
            },
            legend: {
                selectedMode: false
            },
            grid,
            yAxis: {
                type: 'value'
            },
            xAxis: {
                type: 'category',
                data: xaxisData
            },
            series
        };
        myChart1.setOption(option1);
    });

    $.post('/Report/GetEcharts2', function (data) {
        myChart2.hideLoading();
        var edata = data.data;
        $('#chart02_title').html('批次完成情况占比');
        option2 = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                bottom: '5%',
                left: 'left'
            },
            series: [
                {
                    name: '批次完成情况占比',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                        backgroundColor: '#F6F8FC',
                        borderColor: '#8C8D8E',
                        borderWidth: 1,
                        borderRadius: 4,
                        rich: {
                            a: {
                                color: '#6E7079',
                                lineHeight: 22,
                                align: 'center'
                            },
                            hr: {
                                borderColor: '#8C8D8E',
                                width: '100%',
                                borderWidth: 1,
                                height: 0
                            },
                            b: {
                                color: '#4C5058',
                                fontSize: 14,
                                fontWeight: 'bold',
                                lineHeight: 33
                            },
                            per: {
                                color: '#fff',
                                backgroundColor: '#4C5058',
                                padding: [3, 4],
                                borderRadius: 4
                            }
                        }
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: edata.wc, name: '已完成数量' },
                        { value: edata.wwc, name: '未完成数量' }
                    ]
                }
            ]
        };
        myChart2.setOption(option2);
    });

    $.post('/Report/GetEcharts3', function (data) {
        myChart3.hideLoading();
        var edata = data.data;
        $('#chart03_title').html('药品完成情况占比');
        option3 = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                bottom: '5%',
                left: 'left'
            },
            series: [
                {
                    name: '药品完成情况占比',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                        backgroundColor: '#F6F8FC',
                        borderColor: '#8C8D8E',
                        borderWidth: 1,
                        borderRadius: 4,
                        rich: {
                            a: {
                                color: '#6E7079',
                                lineHeight: 22,
                                align: 'center'
                            },
                            hr: {
                                borderColor: '#8C8D8E',
                                width: '100%',
                                borderWidth: 1,
                                height: 0
                            },
                            b: {
                                color: '#4C5058',
                                fontSize: 14,
                                fontWeight: 'bold',
                                lineHeight: 33
                            },
                            per: {
                                color: '#fff',
                                backgroundColor: '#4C5058',
                                padding: [3, 4],
                                borderRadius: 4
                            }
                        }
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: edata.wc, name: '已完成数量' },
                        { value: edata.wwc, name: '未完成数量' }
                    ]
                }
            ]
        };
        myChart3.setOption(option3);
    });
</script>
